<!--
 * @Author: 周洋 1430536748@qq.com
 * @Date: 2024-07-23 23:51:59
 * @LastEditors: 周洋 1430536748@qq.com
 * @LastEditTime: 2024-08-05 23:54:32
 * @version: 1.2.3
 * @Description: 
-->
<script setup lang="ts">
import { props } from '../props';
import MenuItem from '../menu-item/menu-item.vue'
const { activePath, collapse, menuList } = defineProps(props);

</script>
<template>
    <el-menu  class="menu" :default-active="activePath" :collapse="collapse" background-color="none"
        active-text-color="var(--el-color-primary)" text-color="#fff" unique-opened router>
        <slot />
        <MenuItem :menu-list="menuList" />
    </el-menu>
</template>
<style scoped lang="scss">
.menu {
    border-right: 0;
    height: inherit;
}
:deep(.el-sub-menu) {
    display: grid;
    padding-top: 5px;
    padding-bottom: 5px;
    .el-sub-menu__title,
    .el-menu-item {
        height: 42px;
    }
    .el-sub-menu__title:hover,
    .el-menu-item:hover,
    .el-sub-menu__title.is-active,
    .el-menu-item.is-active {
        color: var(--el-color-primary);
        text-shadow: none;
        position: relative;
        border-radius: 15px;
        transition: 0.3s all;
        // background-color: var(--el-color-hover-primary);
    }
    .el-sub-menu__title:hover,
    .el-menu-item:hover {
        background-color: var(--el-color-hover-primary);
    }
}

//父子联动
:deep(.el-sub-menu.is-active > .el-sub-menu__title) {
    color: var(--el-color-primary) !important;
}
//父子上下间距,同级上下间距
// :deep(.ep-sub-menu__title) {
//     margin-bottom: 3px;
// }
// :deep(.ep-menu-item) {
//     margin-bottom: 3px;
// }
</style>